<template>
  <div>
    <h1>Parent</h1>
    <h2 @click="myClick">count:{{ count }}</h2>
    <!-- 
      自定义事件的写法1
     -->
    <Child :index="1" @changeCount="changeCount" />

    <!-- 
      自定义事件的写法2
     -->
    <Child :index="2" @changeCount="count += $event" />

    <!-- 
      给一个组件绑定一个DOM事件
     -->
    <Child :index="3" @click="click1" />

    <!-- 
      想要让给组件绑定的原生DOM事件生效
     -->
    <Child :index="4" @click.native="click1" />
  </div>
</template>

<script>
/*
  组件通信方式2-自定义事件
    自定义事件主要用来执行 子传父的操作
    
  
  自定义事件和原生事件的参数接受比较:
    - 自定义事件函数默认接受的参数$event是 子组件的传参
    - 原生DOM事件函数默认接受的参数$event是 event事件对象

  自定义事件绑定对象比较:
    - 如果自定义事件绑定给了组件,则默认就是自定义事件,用来传值
    - 如果自定义事件绑定给了普通元素,毫无意义

  原生DOM事件绑定对象比较:
    - 如果给组件绑定的原生DOM事件,默认还是认为他是一个自定义事件(如果想要让原生事件生效,则需要使用.native修饰符,默认把原生事件绑定给了组件内的容器元素上)
    - 如果给普通元素绑定原生DOM事件,则正常使用
*/
import Child from "@/pages/EmitEvent/Child";
export default {
  name: "Parent",
  components: {
    Child,
  },
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    changeCount($event) {
      this.count += $event;
    },

    myClick($event) {
      console.log($event);
    },

    click1() {
      console.log("click1触发");
    },
  },
};
</script>

<style></style>
